<template>
  <div style="width: 100%;">
    <div :class="'fild-'+arrangement">
        <span v-if="label" :style="`width:${labelWidth};text-align:${textAlign};position: relative;`">
          <i class="require" v-if="Boolean(requires)">*</i>
            {{ label }}
        </span>
        <div class="inputbox" @click="clickFild">
            <input type="text" v-model="inputValue" :placeholder="placeholder?placeholder:placeholderFn()" :readonly="readonly"/>
            <div class="inputBtn" v-if="inputButtonShow" @click="openCamera">
                <!-- <slot name="iconBtn"></slot> -->
                <img src="@/assets/tack.png"
                style="width: 13px;height: 10.5px;margin-right:2px;"
                alt="">
                {{ inputButtonText }}
            </div>
            <div class="iconSelect" v-else-if="fildType=='select'"></div>
            <div v-else style="position: relative;height: 40px;display: flex;align-items: center;">
              <slot name="button"></slot>
            </div>
        </div>
    </div>
    <van-popup v-model="showPopup" position="bottom" style="height: 55vh" v-if="!['input','textarea','number'].includes(fildType)">
        <van-picker
            v-if="filed_id=='gz'"
            item-height="55px"
            title="请选择"
            show-toolbar
            :columns="columns"
            @confirm="confirm($event,'gz')"
            @cancel="closePopup"
        />
        <van-cascader
            v-else-if="filed_id=='subject_id'"
            style="width: 100%; height: 100%"
            :options="columns"
            title="请选择培训科目"
            @close="closePopup"
            :field-names="{
                text: 'title',
                value: 'id',
                children: 'children',
            }"
            @finish="confirm($event,'subject_id')"
        />
        <van-datetime-picker
          v-else-if="['datetime','datetimeRange'].includes(fildType)"
          v-model="datetime"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          @confirm="confirm($event,'dateTime')"
          @cancel="closePopup"
        />
        <van-cascader
          v-else-if="filed_id=='region_id'"
          v-model="test"
          style="width: 100%; height: 100%"
          :options="regionList"
          title="请选择工作地点"
          @close="
            closePopup
          "
          :field-names="{
            text: 'region_name',
            value: 'region_id',
            children: 'children',
          }"
          @finish="confirm($event,'region_id')"
          @change="HotChange"
        />
        <van-cascader
            v-else-if="filed_id=='dep'"
            v-model="test"
            style="width: 100%; height: 100%"
            title="请选择部门"
            :options="columns"
            @close="closePopup"
            @finish="confirm($event,'dep')"
            :field-names="{
              text: 'title',
              value: 'id',
            }"
          />
        <van-picker
            v-else
            item-height="55px"
            title="请选择"
            show-toolbar
            :columns="columns"
            @confirm="confirm($event,filed_id)"
            @cancel="closePopup"
        />
    </van-popup>
  </div>
</template>

<script>
import {regionList} from "@/api/apply.js";
export default {
    props:{
        //  输入框类型
        fildType:{
            type:String,
            default:'input',
        },
        requires:{
          type:[String,Boolean,Number],
          default:true,
        },
        //  输入框内容(v-model绑定)
        value:{
            type:[String,Number],
            default:'',
        },
        //  输入框提示值
        placeholder:{
            type:String,
            default:'',
        },
        //  输入框只读
        readonly:{
            type:Boolean,
            default:false,
        },
        //  是否展示输入框按钮
        inputButtonShow:{
            type:Boolean,
            default:false,
        },
        //  输入框按钮文本
        inputButtonText:{
            type:String,
            default:'拍 照',
        },
        //  输入框 label值
        label:{
            type:String,
            default:'', 
        },
        // 输入框 label宽度
        labelWidth:{
            type:String,
            default:'80px', 
        },
        // 输入框 label对齐方式
        textAlign:{
            type:String,
            default:'left', 
        },
        columns:{
            type:Array,
            default:()=>{
                return []
            }
        },
        filed_id:{
            type:String,
            default:'', 
        },
        //label 排列方式  column列 row行
        arrangement:{
          type:String,
          default:'row', 
        }
    },
    data(){
        return {
            inputValue:this.value,
            showPopup:false,
            option:null,
            minDate: new Date(1950, 0, 1),
            datetime:new Date(),
            test:'',
            regionList:[],//地区列表
        }
    },
    model:{
        props:'value',
        event:'change'
    },
    watch: {
        inputValue(val){
          this.$emit('change',val,this.option)
        },
        value(val){
          if(this.fildType=='input'){
            this.inputValue=val
          }
        }
    },
    methods:{
        closePopup(){
            this.showPopup=false
        },
        confirm(data,field_id){
            this.closePopup()
            if(field_id=='subject_id'||field_id=='region_id'||field_id=='dep'){

                this.inputValue =  data.selectedOptions
                .map((option) => option.title||option.region_name)
                .join("/");
                this.option = {
                    field_id,
                    value:data.value,
                    text:this.inputValue,
                    ids:data.selectedOptions
                    .map((option) => option.id||option.region_id)
                    .join(","),
                    item:data.selectedOptions[data.selectedOptions.length-1]
                }
            }else if(field_id=='dateTime'){
              let date = new Date(data);
              this.inputValue =
              date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            }else{
                this.inputValue = data
            }
        },
        clickFild(){
          this.showPopup=true
          if (this.filed_id == "region_id") {
              regionList({ region_pid: 0 }).then((res) => {
                this.regionList = res.data.list;
              });
            }
        },
        placeholderFn(){
          if(this.fildType=='select'){
            return `请选择${this.label}`
          }else{
            return `请输入${this.label}`
          }
        },
        //请求地区信息
        async HotChange(value) {
          let id = value.value;
          if (id > 9999) {
            this.deep(this.regionList, id, null);
            return;
          }
          await regionList({ region_pid: id }).then((res) => {
            if (res.data.list.length != 0) {
              this.deep(this.regionList, id, res.data.list);
            }
          });
          this.$forceUpdate()
          // console.log(this.regionList,'90999');
        },
        deep(list = [], id, children = []) {
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            if (item.region_id == id) {
              item.children = children;
              break;
            } else {
              this.deep(item.children, id, children);
            }
          }
        },
    }
}
</script>

<style lang="scss" scoped>
 .require{
    color: #D0021B;
    font-size: 16px;
}
.fild-row{
    display: flex;
    align-items: center;
    width: 100%;
    &>span{
        display: block;
        font-size: 16px;
        // padding: 0 12px;
    }
}
.fild-column{
    display: flex;
    // align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    &>span{
        display: block;
        font-size: 16px;
        width: 180px !important;
        margin-bottom: 12px;
        // padding: 0 12px;
    }
}
.inputbox{
    // border: 1px solid #999;
    border-radius: 6px;
    background: #F7F8FA;
    overflow: hidden;
    display: flex;
    // width: 350px;
    align-items: center;
    flex: 1;
    &:focus-within{
        border-color: #166aff;
    }
    .inputBtn{
        height: 29px;
        width: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #166aff;
        font-size:0.8rem;
        color: #fff;
        border-radius: 4px;
        margin-right: 12px;
        cursor: pointer;
        &:active{
            background: rgba(22, 106, 255,0.8) ;
        }
    }
    .iconSelect{
        height:9px;
        width: 15px;
        margin-right: 12px;
        overflow: hidden;
        &::after{
            content: '';
            display: block;
            height: 12px;
            width: 14px;
            background: #333;
            margin-top: -6px;
            transform: rotate(45deg);
        }
    }
}
input{
    margin: 8px 12px;
    border: none;
    background:none;
    flex: 1;
    height: 24px;
    font-size: 16px;
    // font-family: '宋体';
    color:#333;
    // text-align: right;
    &:focus-visible{
        outline: none;
    }
    &::placeholder{
        color:#69718C;
        font-size: 16px;
    }
    // &:hover ~ .inputbox{
    //     border-color: #166aff;
    // }
}
::v-deep {
  .el-form-item__content {
    line-height: 16px !important;
    margin-left: 0 !important;
  }

  .lablesClass {
    width: 100%;
    font-size: 1rem;
  }

  .van-picker__toolbar {
    button {
      font-size: 16px !important;
    }
  }

  .van-picker-column {
    font-size: 18px;
    // li{
    //   height: 50px !important;
    // }
  }

  .van-picker-column__item--selected {
    background-color: #f5f5f5;
  }

  .van-cascader__header {
    h2 {
      margin: 0 !important;
    }
  }

  .van-tabs {
    height: calc(100% - 48px);

    .van-tabs__content {
      height: calc(100% - 48px);

      .van-tab__pane {
        height: 100%;
      }
    }
  }

  .van-tab {
    font-size: 16px;
  }

  .van-cascader__options {
    height: calc(100%);
  }

  .van-cascader__option {
    font-size: 18px;
    padding: 14px 16px;
  }

  .vant {
    font-size: 1rem !important;

    &::after {
      position: absolute;
      box-sizing: border-box;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ccc;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }

  .van-cell {
    font-size: 1rem !important;
    display: flex;
    flex-direction: column;
    position: relative;

    &::after {
      // position: absolute;
      // box-sizing: border-box;
      // content: " ";
      // pointer-events: none;
      // right: 16px;
      // bottom: 0;
      // left: 16px;
      // border-bottom: 1px solid #ccc;
      // -webkit-transform: scaleY(0.5);
      // transform: scaleY(0.5);
      height: 0;
    }

    .van-cell__value {
      margin-top: 8px;
      padding: 8px 12px;
      background: #f5f5f5;
    }

    .van-icon {
      position: absolute;
      right: 30px;
      bottom: 18px;
      transform: rotate(90deg);
      // display: none;
    }
  }

  .el-form-item__label {
    font-size: 1rem !important;
  }

  .el-form-item {
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
  }

  .catie {
    .van-cell__value {
      margin-top: 30px !important;
    }

    .van-cell {
      .van-icon {
        margin-top: 30px !important;
      }
    }
  }

  .tipTextarea {
    textarea {
      border: none !important;
    }
  }
}
</style>